<template>
  <var-skeleton :loading="loading">
    <div class="main-wrap">
      <checkbox
        v-for="item in list"
        :key="item.Id"
        :data="item"
        @refresh="refreshList"
      >
      </checkbox>
    </div>
  </var-skeleton>
</template>

<script setup lang="ts">
import checkbox from "@/components/checkbox.vue";
interface List {
  Id?: number;
  Status?: number;
  Com_qq: string;
  Com_Email: string;
  Com_Cocial_media: string;
  idv_id: string;
  introduction: string;
}
const list: List[] = reactive([]);
const loading = ref(false);
const refreshList = () => {
  loading.value = true;
  getEnrollList(1, 10)
    .then((res) => {
      list.length = 0;
      res.data.forEach((items: any) => {
        list.push(items);
      });
      setTimeout(() => {
        loading.value = false;
      }, 500);
    })
    .catch((err: any) => {
      Snackbar.error(err.response.data.message);
      loading.value = false;
    });
};
onMounted(() => {
  refreshList();
});
</script>

<style scoped lang="less">
.main-wrap {
  margin: 10px;
  height: calc(100dvh - 54px * 2 - 20px);
  overflow: auto;
}

</style>
